<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>angularjs基础二</title>
    <link rel="stylesheet" href="lib/css/bootstrap.min.css" />
  </head>
  <body>
    <!-- ng-controller="CtrlOne" 是将元素和js控制器关联，避免了id冲突 -->
    <div ng-controller="CtrlOne">
      <!-- 在控制器声明的元素里面可以直接访问$scope声明的对象以及方法 -->
      <input type="text" ng-model="welcome" />
      <span class="btn btn-primary" ng-click="showWelcome();">显示welcome</span>
      <div class="bg-primary h1" ng-bind="welcome"></div>

      <!-- 如果加入了ngSanitize模块，可以使用ng-bind-html显示html渲染结果 -->
      <textarea cols="30" rows="10" ng-model="info"></textarea>
      <div class="bg-danger" ng-bind-html="info"></div>
      <div class="bg-primary" ng-bind="info"></div>
      <div class="bg-warning" ng-bind-html="computeInfo()"></div>

      <!--json对象也支持-->
      <input type="text" ng-model="mycompute.numa">乘
      <input type="text" ng-model="mycompute.numb">的结果是
      <span ng-bind="mycompute.numa*mycompute.numb"></span>
      <span class="btn btn-primary" ng-click="showMyCompute('参数值就是我')">显示json对象</span>
      <div>
        第一个数:<span ng-bind="mycompute.numa"></span>
        <br>
        第二个数:<span ng-bind="mycompute.numb"></span>
      </div>

      <table class="table table-bordered table-hover">
        <tr>
          <td>编号</td>
          <td>名称</td>
        </tr>
        <!--
          ng-repeat可以循环处理数据
          data in list表示循环list变量,每次获取到的数据给data变量
        -->
        <tr ng-repeat="data  in list">
          <td ng-bind="data.id"></td>
          <td ng-bind="data.name"></td>
        </tr>
      </table>
      编号:<input type="text" ng-model="addData.id">
      名称：<input type="text" ng-model="addData.name">
      <span class="btn btn-primary" ng-click="addDataToList();">添加</span>
    </div>

    <script src="lib/js/jquery.min.js"></script>
    <script src="lib/js/bootstrap.min.js"></script>
    <script src="lib/js/angular.min.js"></script>
    <script src="lib/js/angular-sanitize.min.js"></script>
    <script src="app/js/ng002.js"></script>
  </body>
</html>
